<template>
  <div class="container">
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      title="编辑资料"
    ></van-nav-bar>
    <van-cell-group>
      <van-cell is-link title="头像" center>
        <div class="user-photo">
          <van-image
            slot="default"
            width="1.5rem"
            height="1.5rem"
            fit="cover"
            round
            :src="user.photo"
            @click="imageChange"
          />
          <input
            class="photo"
            @change="photoUpdata"
            type="file"
            ref="photoInput"
          />
        </div>
      </van-cell>
      <van-cell
        is-link
        title="名称"
        :value="user.name"
        @click="showName = true"
      />
      <van-cell
        is-link
        title="性别"
        :value="user.gender === 0 ? '男' : '女'"
        @click="showGender = true"
      />
      <van-cell
        is-link
        title="生日"
        :value="user.birthday"
        @click="showBirthday = true"
      />
    </van-cell-group>
    <!-- 修改名称 -->
    <van-dialog
      v-model="showName"
      title="修改名称"
      show-cancel-button
      @confirm="SaveName"
      @cancel="CancelSave"
    >
      <van-field v-model="newName" placeholder="请输入您的名字" />
    </van-dialog>
    <!-- 修改性别 -->
    <van-popup
      v-model="showGender"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-nav-bar
        title="修改性别"
        left-text="取消"
        right-text="保存"
        @click-left="showGender = false"
        @click-right="showGender = false"
      />
      <!-- 单选 男 或女  radio value -->
      <van-cell
        title="男"
        :class="user.gender === 0 ? 'cur' : ''"
        @click="changeSex(0)"
      >
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="checked" />
        </template>
      </van-cell>
      <van-cell
        title="女"
        :class="user.gender === 1 ? 'cur' : ''"
        @click="changeSex(1)"
      >
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="checked" />
        </template>
      </van-cell>
    </van-popup>
    <!-- 选择生日 -->
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker
        @confirm="saveBirthDay"
        @cancel="showBirthday = false"
        v-model="newDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>

<script>
// birthday: ""
// gender: 0
// id: 1285811921370480600
// mobile: "19801279521"
// name: "19801279521"
// photo: "http://toutiao.meiduo.site/Fkj6tQi3xJwVXi1u2swCElotfdCi"
import { userGetInfo, editProfile, upDataPhoto } from "@/api/user.js";
import { formatDay } from "@/utils/date-time.js";
import { mapMutations } from "vuex";
export default {
  name: "userProfile",
  data() {
    return {
      // 控制弹层
      showName: false,
      showGender: false,
      showBirthday: false,

      // 当前用户的信息
      user: {},
      // 修改后的新名字
      newName: "",
      // 修改后新生日
      newDate: new Date(),
      minDate: new Date(1965, 0, 10), // dateTime-picker中最小时间
      maxDate: new Date() // 当前时间
    };
  },
  created() {
    //   this.userGetInfos();
  },
  mounted() {
    // userGetInfo()
    this.userGetInfos();
  },
  methods: {
    ...mapMutations(["savePhoto"]),
    imageChange() {
      // jd 模拟点击事件
      //  $('.photo').trigger('click')
      // this.$refs.photoInput.click();
    },
    async photoUpdata(event) {
      //console.log(event.target.files,'files : 文件内容')
      //upDataPhoto
      // 向后端发送数据做请求
      // 1. 获取参数
      const files = event.target.files;
      if (!files[0]) {
        console.log("文件不能为空");
        return;
      }
      console.log(files[0], "files : 文件内容");
      const fd = new FormData();
      fd.append("photo", files[0]);
      console.log(fd, "formdata 内容");
      // 2.向后端传
      const res = await upDataPhoto(fd);
      // 3. 更新视图
      const photo = res.data.data.photo;
      this.user.photo = photo;
      this.savePhoto(photo);
      this.$toast.success("头像更新成功");
      // 如何多次上传同一个图片
      //  this.$refs.photoInput.value = ''
    },
    async userGetInfos() {
      const res = await userGetInfo();
      this.user = res.data.data;
    },
    // 保存姓名
    SaveName() {
      // 获取参数 newName
      const newName = this.newName;
      // 传给服务器
      if (!newName) {
        this.$toast.fail("不能保存空名字");
        return;
      }
      if (newName === this.user.name) {
        this.$toast.fail("不能相同的姓名");
        return;
      }
      editProfile({
        name: newName
      }).then(res => {
        this.user.name = newName;
      });
      // 更新我们的视图
    },
    //取消保存姓名
    CancelSave() {
      this.newName = "";
    },
    // 性别
    changeSex(val) {
      // 拿到参数

      const newGender = val;
      // 传到服务器 0 男 1 女
      editProfile({
        gender: newGender
      }).then(
        res => {
          // 渲染数据
          this.user.gender = newGender;
          this.showGender = false;
        },
        err => {}
      );
    },
    // 生日
    saveBirthDay(val) {
      const birthday = formatDay(val);
      // { birthday } ==== { "birthday":birthday }
      editProfile({
        birthday
      }).then(res => {
        this.showBirthday = false;
        this.user.birthday = birthday;
      });
    }
  }
};
</script>

<style lang="less">
.van-nav-bar__text {
  color: #fff;
}
.cur {
  color: #1989fa;
  .van-icon {
    color: #1989fa;
  }
}
.user-photo {
  position: relative;
  display: inline-block;
  input {
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
  }
}
</style>
